<template>
	<view>
		<u-navbar :is-back='false' title-color='#fff' :background="background" :title="title">
			<view class="slot-wrap" v-if='JSON.stringify(style)!="{}"'>
				<view class="slot-wrap-box" :style="{width:(style.width*2)+'rpx',height:style.height+'px',lineHeight:style.height+'px'}">
					<view hover-class="hover-back" class="go-back" @click="handGoBack">
						<u-icon size="32" color="#fff" name="arrow-left"></u-icon>
					</view>
					<view class="lin">

					</view>
					<view hover-class="hover-home" class="go-home" @click="handGoHome">
						<u-icon size="32" color="#fff" name="home-fill"></u-icon>

					</view>
				</view>
			</view>
		</u-navbar>
		<view class="content">
			<!-- 正文内容 -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: '标题'
			}
		},
		data() {
			return {
				background: {
					backgroundColor: '#0050A5'
				},
				style: {}
			};
		},
		methods: {
			handGoBack() {
				uni.navigateBack({

				})
			},
			handGoHome() {
				uni.switchTab({
					url: '/pages/index/index',
					fail: function(err) {
						console.log(err)
					}
				})
			},
		},
		mounted() {
			this.style = wx.getMenuButtonBoundingClientRect()
		}
	}
</script>

<style lang="scss">
	.slot-wrap {
		padding: 0 30rpx;

		.slot-wrap-box {
			position: relative;
			display: flex;
			align-items: center;
			overflow: hidden;
			border-radius: 32rpx;
			background: rgba(0, 0, 0, 0.2);
			box-shadow: 0 0 1px rgba(255, 255, 255, .5);
		}

		.lin {
			position: absolute;
			width: 0.5px;
			height: 56%;
			background: rgba(255, 255, 255, 0.2);
			left: 50%;
			top: 50%;
			transform: translate(0, -50%);
			// margin-top: -80%;

		}

		.go-home {
			width: 50%;
			text-align: center;
			color: #fff;

		}

		.hover-home {
			background: rgba(0, 0, 0, 0.4);
		}

		.hover-back {
			background: rgba(0, 0, 0, 0.4);
		}

		.go-back {
			width: 50%;
			text-align: center;

		}



		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
	}
</style>
